{% extends 'base-static.html' %}
{% load staticfiles %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/datatables/jquery.dataTables.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/layui/css/modules/layer/skin/layer.css' %}">
{% endblock %}

{% block content %}
    <section class="content-header">
        <h1>
            统计
        </h1>
        <ol class="breadcrumb">
            <li><a href="{% url 'system:index' %}"><i class="fa fa-dashboard"></i>统计</a></li>
            <li class="active">统计</li>
        </ol>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-md-10">
                <div id="chart1" style="width: 1100px;height: 270px;"></div>
            </div>
            <div class="col-md-2" style="margin-top: 60px;">
                <a href="{% url 'backend:user' %}" class="btn btn-primary active" role="button">用户详情</a>
                <ul id="show-user" style="margin-top: 30px;">
                    <li>总用户数：<span id="user_total"></span></li>
                    <li>今日新增：<span id="user_today_nums"></span></li>
                    <li>昨日新增：<span id="user_yesterday_nums"></span></li>
                </ul>
            </div>
        </div>

        <div class="row">
            <div class="col-md-10">
                <div id="chart2" style="width: 1100px;height: 270px;margin-top: 50px;"></div>
            </div>
            <div class="col-md-2" style="margin-top: 60px;">
                <a href="{% url 'backend:device' %}" class="btn btn-primary active" role="button">设备详情</a>
                <ul id="show-user" style="margin-top: 30px;">
                    <li>总台数：<span id="device_total"></span></li>
                    <li>今日新增：<span id="device_today_nums"></span></li>
                    <li>昨日新增：<span id="device_yesterday_nums"></span></li>
                </ul>
            </div>
        </div>

    </section>


{% endblock %}


{% block js %}
    <script src="{% static 'plugins/layui/layui.js' %}"></script>
    <script src="{% static 'plugins/layui/css/modules/layer/layer.js' %}"></script>
    <script src="https://cdn.bootcss.com/echarts/3.7.2/echarts.min.js"></script>

    <script>
        var chart1 = echarts.init(document.getElementById("chart1"));
        var chart2 = echarts.init(document.getElementById("chart2"));

        $(document).ready(function () {
            user_grid();
            device_grid();
        });

        var option = {
            title: {
                text: '当前注册用户',
                x: 'center'
            },
            xAxis: {
                name: '日期/天',
                type: 'category',
                boundaryGroup: true,    // false 时，第一个点在 y 轴上
                /*axisLabel: {
                    rotate: 30, // 倾斜角度
                    interval: 0
                }*/
            },
            yAxis: {
                name: '数量/台',
                type: 'value',
                minInterval: 1,
                min: 0,
                max: 20,
                splitNumber: 10,
            },
            tooltip: {
                trigger: 'axis' // 鼠标悬浮其上，显示相应纵坐标的值
            },
            dataZoom: [{
                type: 'slider',//图表下方的伸缩条
                show: true, //是否显示
                realtime: true, //拖动时，是否实时更新系列的视图
                start: 0, //伸缩条开始位置（1-100），可以随时更改
                end: 70, //伸缩条结束位置（1-100），可以随时更改
            }],
            series: [{
                data: [],
                type: 'line'
            }]
        };

        function get_option() {
            return option;
        }

        // 用户列表
        function user_grid(data) {
            var url = "{% url 'backend:user-detail' %}";
            $.get(url, function (data) {
                var user_list = data['user_list'];
                var total = data['total'];

                var result = date_format(user_list);
                var user_date_list = result[0];
                var user_num_list = result[1];

                var max = Math.max.apply(null, user_num_list);

                var user_option = get_option();

                user_option.xAxis.data = user_date_list;
                user_option.series[0]['data'] = user_num_list;
                user_option.title.text = '当前注册用户';
                user_option.yAxis.name = '数量/个';
                user_option.yAxis.max = max * 10;
                $('#user_total').text(total);
                $('#user_today_nums').text(data['today_nums']);
                $('#user_yesterday_nums').text(data['yesterday_nums']);

                chart1.setOption(user_option);

            });
        }

        // 设备列表
        function device_grid(data) {
            var url = "{% url 'backend:device-detail' %}";
            $.get(url, function (data) {
                var device_list = data['route_list'];
                var total = data['total'];

                var result = date_format(device_list);
                var device_date_list = result[0];
                var device_num_list = result[1];
                var max = Math.max.apply(null, device_num_list);

                var device_option = get_option();

                device_option.xAxis.data = device_date_list;
                device_option.series[0]['data'] = device_num_list;
                device_option.title.text = '当前设备';
                device_option.yAxis.name = '数量/台';
                device_option.yAxis.max = max * 10;

                $('#device_total').text(total);
                $('#device_today_nums').text(data['today_nums']);
                $('#device_yesterday_nums').text(data['yesterday_nums']);

                chart2.setOption(device_option);
            });
        }


        // 转换格式
        function date_format(data) {
            var date_list = new Array(), num_list = new Array();

            $.each(data, function (index) {
                date_list.push(data[index]['date']);
                num_list.push(data[index]['nums']);
            });

            return [date_list, num_list]
        }
    </script>

{% endblock %}
